<template>
	<view>
		<!-- 点击登录 -->
		<view class="userBox">
			<u--image
				src="https://ts3.cn.mm.bing.net/th?id=OIP-C.cT1RA85bYHiJ0erDaDQpiwHaFj&w=288&h=216&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
				class="userImg" width="140rpx" height="140rpx" shape="circle" mode="scaleToFill" v-if="!isShow">
			</u--image>
			<u--image :src="avatar" class="userImg" v-if="isShow" width="140rpx" height="140rpx" shape="circle"
				mode="scaleToFill">
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u--image>
			<view class="UserTxt" v-if="!isShow" @click="open()">点击登录</view>
			<view class="UserTxt" v-if="isShow">{{name}}</view>
			<u-icon name="arrow-right" color="#fff" size="24" v-if="!isShow" @click="open()"></u-icon>
			<u-icon name="close" color="#fff" size="24" v-if="isShow" @click="exitFn"></u-icon>
		</view>
		<!-- 功能布局 -->
		<u-grid :col="3">
			<u-grid-item required="true" v-for="(item,index) in navList" :key="index" class="navSty"
				@click="onFunction">
				<u-icon :name="item.icon" :size="46"></u-icon>
				<view class="grid-text">{{item.text}}</view>
			</u-grid-item>
		</u-grid>
		<!-- 底部导航栏 -->
		<!-- 弹出层 -->
		<u-popup :show="LoginShow" mode="center" @close="close" @open="open"
			:customStyle="{padding:'50rpx',width:'90%',boxSizing:'border-box'}">
			<view>
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
					<u-form-item label="姓名" prop="userInfo.name" borderBottom>
						<u--input v-model="model1.userInfo.name" border="none" placehoder="请填写用户名"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="userInfo.password" borderBottom>
						<u--input v-model="model1.userInfo.password" type="password" placehoder="请填写密码" border="none">
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<u-button :customStyle="{marginTop:'30rpx'}" shape="circle" type="error" text="登录/注册" @click="onSubmit">
			</u-button>
		</u-popup>

		<u-modal :show="modelIsShow" title="登出账号确认" closeOnClickOverlay content='您是否想要退出当前账号?' showCancelButton
			@cancel="cancelFn" @confirm="YesETix" @close="cancelFn"></u-modal>
		<tobBar :current="4"></tobBar>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		authLoginByWebApi
	} from "../request/api.js"
	import request from "../request/request.js"
	export default {
		data() {
			return {
				navList: [{
						icon: 'bookmark',
						text: '我的订单'
					},
					{
						icon: 'red-packet',
						text: '优惠券'
					},
					{
						icon: 'bag',
						text: '礼品卡'
					},
					{
						icon: 'map',
						text: '我的收藏'
					},
					{
						icon: 'tags',
						text: '我的足迹'
					},
					{
						icon: 'account',
						text: '会员福利'
					},
					{
						icon: 'pushpin',
						text: '地址管理'
					},
					{
						icon: 'warning',
						text: '账号安全'
					},
					{
						icon: 'kefu-ermai',
						text: '联系客服'
					},
					{
						icon: 'question-circle',
						text: '帮助中心'
					},
					{
						icon: 'chat',
						text: '意见反馈'
					},
				],
				show: false,
				userName: '',
				userPwd: '',
				userInfo: {},
				token: '',
				isShow: false,
				LoginShow: false,
				showSex: false,
				modelIsShow: false,
				avatar: '',
				name: '',
				model1: {
					userInfo: {
						name: '',
						password: '',
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.password': [{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return value.length >= 6 && value.length <= 10
							},
							message: '密码应该在6到10位之间',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				switchVal: false
			}
		},
		onLoad() {
			let token = uni.getStorageSync('token')
			let userInfo = uni.getStorageSync('userInfo')
			if (token) {
				this.isShow = true;
				this.name = userInfo.username
				this.avatar = userInfo.avatar
			}
		},
		methods: {
			close() {
				this.LoginShow = false
			},
			open() {
				this.LoginShow = true;
			},
			onSubmit() {
				this.$refs.form1.validate().then(res => {
					// uni.$u.toast('校验通过')
					// console.log(this.model1.userInfo.name.trim());
					// 再去提交表单
					request({
						url: authLoginByWebApi,
						method: 'POST',
						data: {
							username: this.model1.userInfo.name.trim(),
							pwd: this.model1.userInfo.password.trim()
						},
						successCb: res => {
							// console.log(res);
							const {
								token,
								userInfo
							} = res
							uni.setStorageSync('token', token)
							uni.setStorageSync('userInfo', userInfo)
							const {
								username,
								avatar
							} = userInfo
							// 头像和用户名
							this.name = username
							this.avatar = avatar
							this.isShow = true
							// 判断密码是否正确
							if (res.errno == 602) {
								this.$refs.uToast.show({
									type: 'error',
									message: "密码错误",
								})
							}
							// 判断是否登录跳转购物车
							let cartUrl = uni.getStorageSync('cartUrl')
							if (cartUrl) {
								this.$refs.uToast.show({
									type: 'loading',
									message: "即将跳转到购物车",
									loading: true,
								})
								setTimeout(() => {
									uni.switchTab({
										url: cartUrl
									})
								}, 1500)
								uni.removeStorageSync('cartUrl')
							}
							//清空表单
							this.$refs.form1.resetFields()
							this.LoginShow = false
						},
						failCb: err => {
							if (err == "接口发送到后端,但是没有跟后端成功通信") {
								uni.showToast({
									title: "密码错误",
									icon: "error"
								})
							}
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			exitFn() {
				this.modelIsShow = true
			},
			cancelFn() {
				this.modelIsShow = false
			},
			YesETix() {
				this.cancelFn()
				uni.clearStorageSync()
				this.isShow = false
			},
			onFunction() {
				uni.$u.toast('该功能尚未开放')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.navSty {
		border-right: 2rpx solid #ccc;
		border-bottom: 2rpx solid #ccc;
		box-sizing: border-box;
	}

	.userBox {
		width: 100%;
		height: 220rpx;
		padding: 40rpx 20rpx;
		font-family: "黑体";
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #333333;
		box-sizing: border-box;
		color: #fff;
	}

	.userImg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.UserTxt {
		flex: 1;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		// color: $u-type-info;
		margin-top: 20rpx;
	}

	.navSty {
		width: 220rpx;
		height: 220rpx;
	}

	.FormSty {
		width: 90%;
		height: 296rpz;
		background-color: #fff;
	}

	/deep/ .u-modal__content__text {
		text-align: center;
	}
</style>
